import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
// import ReactDOM from 'react-dom';
// import { SlideContainer, SlidePage } from 'react-slidePage';
import Swiper from 'swiper/dist/js/swiper.js';
import 'swiper/dist/css/swiper.min.css';
import Carousel from '../../components/carousel';
import WheelIndicator from 'wheel-indicator';
// import HeadNavbar from '../../components/headNavbar';
import styles from './style.module.scss';

class appEclipse extends PureComponent {
    _isMounted = false;
    constructor(props) {
        super(props);
        this.state = {
            slidePage: 0,
            slideToolShow: false,
            offsetheight: document.documentElement.clientHeight,    //获取当前页面的高度
            // offsetheight: '100%',    //获取当前页面的高度
        }
        this.operateListenScreenChange = this.operateListenScreenChange.bind(this)
    }
    operateChangeSlidePage(page) {
        this._isMounted = true;
        if (this._isMounted) {
            // this.refs['AppEclipseSlideContainer'].slideTo(page)
            this.setState({slidePage: page})
            this.mySwiperHot.slideTo(page)
        }
    }
    // operateBeforeSlidePage(origin, direction, target) {
    //     this._isMounted = true;
    //     if (this._isMounted) {
    //         this.setState({slidePage: target})
    //         if (target === 3) {
    //             setTimeout(() => {
    //                 this.setState({slideToolShow: true})
    //                 console.log(this.state.slideToolShow, '...slideToolShow')
    //             }, 1000);
    //         } else {
    //             this.setState({slideToolShow: false})
    //         }
    //     }
    // }
    operateListenScreenChange(e) {
        console.log(e.currentTarget.innerHeight, '监听屏幕变化')
        this.setState({offsetheight: document.documentElement.clientHeight})
    }
    componentWillUnmount() {
        console.log('加载 app down')
        this._isMounted = false;
        // window.removeEventListener('resize',this.operateListenScreenChange);
    }
    componentDidMount(){
        const self = this;
        this.mySwiperHot = new Swiper(this.musicScoreSwiper, {
            direction: 'vertical', // 垂直切换选项
            // 切换速度
            speed: 250,
            // mousewheel: true,
            mousewheelControl: false,
            observer: true,//修改swiper自己或子元素时，自动初始化swiper
            observeParents: true,//修改swiper的父元素时，自动初始化swiper
            on: {
                slideChange(){
                    console.log(this.realIndex)
                    // self.setState({slidePage: this.realIndex})
                    self.setState({offsetheight: document.documentElement.clientHeight})
                    self._isMounted = true;
                    if (self._isMounted) {
                        self.setState({slidePage: this.realIndex})
                        if (this.realIndex === 0) {
                            self.refs.slideZeroVideo.play()
                        } else {
                            self.refs.slideZeroVideo.pause()
                            self.refs.slideZeroVideo.currentTime = 0
                        } 
                        if (this.realIndex === 2) {
                            self.refs.slideVideo.play()
                        } else {
                            self.refs.slideVideo.pause()
                            self.refs.slideVideo.currentTime = 0
                        }
                        if (this.realIndex === 3) {
                            setTimeout(() => {
                                self.setState({slideToolShow: true})
                                console.log(self.state.slideToolShow, '...slideToolShow')
                            }, 1000);
                        } else {
                            self.setState({slideToolShow: false})
                        }
                    }
                },
                resize(){
                    //窗口变化了
                    self.setState({offsetheight: document.documentElement.clientHeight})
                }, 
            }
        });

        this.indicator = new WheelIndicator({
            elem: document.querySelector('.swiper-container'),
            callback: function(e){
                console.log(e.direction, '...e.direction')
              if(e.direction === 'up') self.mySwiperHot.slidePrev();
              else self.mySwiperHot.slideNext();
            }
        });
        this.indicator.getOption('preventMouse'); 

        // 监听屏幕变化
        // window.addEventListener('resize', this.operateListenScreenChange);
    }
    render() {
        let { slidePage, slideToolShow, offsetheight } = this.state;
        return (
            <div className={styles["appEclipse"]}>
                {/* <HeadNavbar navigateIndex={4} ></HeadNavbar> */}
                {/* <SlideContainer ref="AppEclipseSlideContainer" page={slidePage} before={this.operateBeforeSlidePage.bind(this)}>
                    <SlidePage className="slide-page slideOne">
                        <div className="slideOneContent">
                            <div className="slideOneCaption">
                                <div className="slideOneLogo">
                                    <div className="slideOneLogoImage">
                                        <img src="https://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/matter/image/logo_big.png" alt="" />
                                    </div>
                                    <div className="slideOneLogoText">好音乐，玩出来</div>   
                                </div>
                                <div className="slideOneCode">
                                    <div className="slideOneCodeAndroid">
                                        <div className="slideOneCodeAndroidImage">
                                            <img src="http://mobuz-mp.cdn.bcebos.com/matter/android_download.png" alt="" />
                                        </div>
                                        <div className="slideOneCodeAndroidText">Android下载</div>
                                    </div>
                                    <div className="slideOneCodeIOS">
                                        <div className="slideOneCodeIOSImage">
                                            <img src="http://mobuz-mp.cdn.bcebos.com/matter/ios_download.png" alt="" />
                                        </div>
                                        <div className="slideOneCodeIOSText">iOS下载</div>
                                    </div>
                                </div>
                            </div>
                            <div className="slideOneReferral">
                                <div className="slideOneReferralTitle">十年磨一剑的全维度系统教学</div>
                                <div className="slideOneReferralLine"></div>
                                <div className="slideOneReferralExpound">名师团队开发，线下数年实践经验，从弹奏到乐理到基本功，全维度教学，每一个知识点为你庖丁解牛</div>
                            </div>
                            <div className="slideOneMultimedia">
                                <div className="slideOneMultimediaLine"></div>
                                <div className="slideOneMultimediaContent">
                                    <Carousel pagination={false}/>
                                </div>
                                <div className="slideOneMultimediaIponeX"></div>
                            </div>
                        </div>
                    </SlidePage>
                    <SlidePage className="slide-page slideTwo">
                        <div className="slideTwoReferral">
                            <div className="slideTwoReferralTitle">AI乐音识别算法，即时反馈弹奏结果</div>
                            <div className="slideTwoReferralLine"></div>
                            <div className="slideTwoReferralExpound">让你不再只是自己摸索走弯路，我们通过系统对弹奏的识别，了解你的学习情况，为你量身定做最适合你的个性化教学</div>
                        </div>
                        <div className="slideTwoMultimedia">
                            <div className="slideTwoMultimediaLine"></div>
                            <div className="slideTwoMultimediaContent"></div>
                            <div className="slideTwoMultimediaIponeX"></div>
                        </div>
                    </SlidePage>
                    <SlidePage className="slide-page slideThree">
                        <div className="slideThreeReferral">
                            <div className="slideThreeReferralTitle">你需要的，这里都有</div>
                            <div className="slideThreeReferralLine"></div>
                            <div className="slideThreeReferralExpound">调音器，节拍器，海量曲谱库，最新流行歌曲教学。学吉他相关的，这里应有尽有，一站式解决你的所有需要</div>
                        </div>
                        <div className="slideThreeMultimedia">
                            <div className="slideThreeMultimediaLine"></div>
                            <div className="slideThreeMultimediaContent">
                                <div className={slideToolShow? 'slideThreeMultimediaContentImage slideThreeMultimediaContentImageShow': 'slideThreeMultimediaContentImage'}>
                                    <img src="https://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/matter/image/tool%402x.png" alt="" />
                                </div>
                                <div className={!slideToolShow? 'slideThreeMultimediaContentLamp': 'slideThreeMultimediaContentLamp slideThreeMultimediaContentLampHide'}>
                                    <div className="double-bounce1"></div>
                                    <div className="double-bounce2"></div>
                                </div>
                            </div>
                            <div className="slideThreeMultimediaIponeX"></div>
                        </div>
                    </SlidePage>
                </SlideContainer> */}



                <div className={`swiper-container ${styles['swiper-container']}`} ref={musicScoreSwiper => this.musicScoreSwiper = musicScoreSwiper}  style={{height: offsetheight}}>
                    <div className="swiper-wrapper">
                        <div className="swiper-slide" style={{height: offsetheight, position: 'relative', overflow: 'hidden'}}>
                            <div className={styles["slideZero"]} style={{height: offsetheight}}>
                                <div className={styles["slideZeroContent"]}>
                                    <div className={styles["slideZeroCaption"]}>
                                        <div className={styles["slideZeroLogo"]}>
                                            <img src="https://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/matter/image/img_font_download.png" alt="" />
                                        </div>
                                        <div className={styles["slideZeroCode"]}>
                                            <div className={styles["slideZeroCodeAndroid"]}>
                                                <div className={styles["slideZeroCodeAndroidImage"]}>
                                                    <img src="http://mobuz-mp.cdn.bcebos.com/matter/android_download.png" alt="" />
                                                </div>
                                                <div className={styles["slideZeroCodeAndroidText"]}>Android下载</div>
                                            </div>
                                            <div className={styles["slideZeroCodeIOS"]}>
                                                <div className={styles["slideZeroCodeIOSImage"]}>
                                                    <img src="http://mobuz-mp.cdn.bcebos.com/matter/ios_download.png" alt="" />
                                                </div>
                                                <div className={styles["slideZeroCodeIOSText"]}>iOS下载</div>
                                            </div>
                                        </div>
                                    </div>
                                    <video data-v-45d5f006="" src='http://mobuz-mp.cdn.bcebos.com/matter/web_pc_video_backgoud.mp4' loop="loop" muted="muted" autoPlay ref="slideZeroVideo"></video>
                                </div>
                            </div>
                        </div>
                        <div className="swiper-slide" style={{height: offsetheight}}>
                            <div className={styles["slideOne"]} style={{height: offsetheight}}>
                                <div className={styles["slideOneContent"]}>
                                    {/* <div className={styles["slideOneCaption"]}>
                                        <div className={styles["slideOneLogo"]}>
                                            <div className={styles["slideOneLogoImage"]}>
                                                <img src="https://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/matter/image/logo_big.png" alt="" />
                                            </div>
                                            <div className={styles["slideOneLogoText"]}>好音乐，玩出来</div>   
                                        </div>
                                        <div className={styles["slideOneCode"]}>
                                            <div className={styles["slideOneCodeAndroid"]}>
                                                <div className={styles["slideOneCodeAndroidImage"]}>
                                                    <img src="http://mobuz-mp.cdn.bcebos.com/matter/android_download.png" alt="" />
                                                </div>
                                                <div className={styles["slideOneCodeAndroidText"]}>Android下载</div>
                                            </div>
                                            <div className={styles["slideOneCodeIOS"]}>
                                                <div className={styles["slideOneCodeIOSImage"]}>
                                                    <img src="http://mobuz-mp.cdn.bcebos.com/matter/ios_download.png" alt="" />
                                                </div>
                                                <div className={styles["slideOneCodeIOSText"]}>iOS下载</div>
                                            </div>
                                        </div>
                                    </div> */}
                                    <div className={styles["slideOneReferral"]}>
                                        <div className={styles["slideOneReferralTitle"]}>十年磨一剑的全维度系统教学</div>
                                        <div className={styles["slideOneReferralLine"]}></div>
                                        <div className={styles["slideOneReferralExpound"]}>名师团队开发，线下数年实践经验，从弹奏到乐理到基本功，全维度教学，每一个知识点为你庖丁解牛</div>
                                    </div>
                                    <div className={styles["slideOneMultimedia"]}>
                                        <div className={styles["slideOneMultimediaLine"]}></div>
                                        <div className={`swiper-lazy ${styles["slideOneMultimediaContent"]}`}>
                                            <Carousel pagination={false}/>
                                        </div>
                                        <div className={styles["slideOneMultimediaIponeX"]}></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="swiper-slide" style={{height: offsetheight}}>
                            <div className={styles["slideTwo"]} style={{height: offsetheight}}>
                                <div className={styles["slideTwoContent"]}>
                                    <div className={styles["slideTwoReferral"]}>
                                        <div className={styles["slideTwoReferralTitle"]}>AI乐音识别算法，即时反馈弹奏结果</div>
                                        <div className={styles["slideTwoReferralLine"]}></div>
                                        <div className={styles["slideTwoReferralExpound"]}>让你不再只是自己摸索走弯路，我们通过系统对弹奏的识别，了解你的学习情况，为你量身定做最适合你的个性化教学</div>
                                    </div>
                                    <div className={styles["slideTwoMultimedia"]}>
                                        <div className={styles["slideTwoMultimediaLine"]}></div>
                                        <div className={styles["slideTwoMultimediaContent"]}>
                                            {/* <video data-v-45d5f006="" src= {(slidePage === 1)? 'https://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/matter/video/game_recite.mp4': ''} autoPlay="autoplay" loop="loop" muted="muted"></video> */}
                                            <video data-v-45d5f006="" src='https://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/matter/video/game_recite.mp4' loop="loop" muted="muted" ref="slideVideo"></video>
                                        </div>
                                        <div className={styles["slideTwoMultimediaIponeX"]}>
                                            {/* <img src="https://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/matter/image/iPhone_quanmian.png" alt="" /> */}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="swiper-slide" style={{height: offsetheight}}>
                            <div className={styles["slideThree"]} style={{height: offsetheight}}>
                                <div className={styles["slideThreeContent"]}>
                                    <div className={styles["slideThreeReferral"]}>
                                        <div className={styles["slideThreeReferralTitle"]}>你需要的，这里都有</div>
                                        <div className={styles["slideThreeReferralLine"]}></div>
                                        <div className={styles["slideThreeReferralExpound"]}>调音器，节拍器，海量曲谱库，最新流行歌曲教学。学吉他相关的，这里应有尽有，一站式解决你的所有需要</div>
                                    </div>
                                    <div className={styles["slideThreeMultimedia"]}>
                                        <div className={styles["slideThreeMultimediaLine"]}></div>
                                        <div className={styles["slideThreeMultimediaContent"]}>
                                            <div className={slideToolShow? `${styles["slideThreeMultimediaContentImage"]} ${styles["slideThreeMultimediaContentImageShow"]}`: styles["slideThreeMultimediaContentImage"]}>
                                                <img src="https://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/matter/image/tool%402x.png" alt="" />
                                            </div>
                                            <div className={!slideToolShow? styles["slideThreeMultimediaContentLamp"]: `${styles["slideThreeMultimediaContentLamp"]} ${styles["slideThreeMultimediaContentLampHide"]}`}>
                                                <div className={styles["double-bounce1"]}></div>
                                                <div className={styles["double-bounce2"]}></div>
                                            </div>
                                        </div>
                                        <div className={styles["slideThreeMultimediaIponeX"]}></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="swiper-pagination"></div>
                </div>





                <div className={styles["slidePoint"]}>
                    <div className={(slidePage === 0)? `${styles["slidePointCell"]} ${styles["active"]}`: styles["slidePointCell"]} onClick={this.operateChangeSlidePage.bind(this, 0)}></div>
                    <div className={(slidePage === 1)? `${styles["slidePointCell"]} ${styles["active"]}`: styles["slidePointCell"]} onClick={this.operateChangeSlidePage.bind(this, 1)}></div>
                    <div className={(slidePage === 2)? `${styles["slidePointCell"]} ${styles["active"]}`: styles["slidePointCell"]} onClick={this.operateChangeSlidePage.bind(this, 2)}></div>
                    <div className={(slidePage === 3)? `${styles["slidePointCell"]} ${styles["active"]}`: styles["slidePointCell"]} onClick={this.operateChangeSlidePage.bind(this, 3)}></div>
                </div>
            </div>
        )
    }
}

const mapState = (state) => ({});

const mapDispatch = (dispatch) => ({});

export default connect(mapState, mapDispatch)(withRouter(appEclipse));